
<template>
  <container-wrapper
    :designer="designer"
    :field="field"
    :parent-id="parentId"
    :parent-list="parentList"
    :children="children"
    :index-of-parent-list="indexOfParentList"
    @click.native.stop="selectField(fieldId)"
  >
    <!-- <div v-if="children.length === 0" style="height: 40px"></div> -->
    <el-row
      :gutter="field.options.gutter"
      :class="{ designer: designer.designStatus }"
      class="grid_unit"
    >
      <draggable
        :list="children"
        v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
        handle=".drag-handler"
        :move="() => true"
        @update="onGridDragUpdate"
      >
        <div v-if="children.length === 0" style="height: 72px" />
        <transition-group name="fade" tag="div" class="form-unit-list">
          <template v-for="(unit, index) in children">
            <template v-if="typeof unit === 'string'">
              <!-- 输入字段单元 -->
              <component
                :is="getUnitName(unit)"
                :key="unit"
                :field-id="unit"
                :designer="designer"
                :parent-id="unit"
                :parent-list="children"
                :index-of-parent-list="index"
                :form-data="formData"
              />
            </template>
            <template v-else>
              <!-- 容器单元 -->
              <component
                :is="getUnitName(unit.id)"
                :key="unit.id"
                :field-id="unit.id"
                :children="unit.children"
                :designer="designer"
                :parent-id="unit.id"
                :parent-list="children"
                :index-of-parent-list="index"
                :form-data="formData"
              />
            </template>
          </template>
        </transition-group>
      </draggable>
    </el-row>
  </container-wrapper>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import Draggable from "vuedraggable";
import ContainerWrapper from "./container-wrapper";
import containerMixin from "./containerMixin";
import FieldComponents from "../field_unit/index";
import "./index";
export default {
  name: "grid_unit",
  componentName: "LayoutUnit",
  components: {
    Draggable,
    ContainerWrapper,
    ...FieldComponents,
  },
  mixins: [containerMixin],
  props: {
    designer: Object,
    fieldId: String,
    children: Array,
    parentId: String,
    parentList: Array,
    indexOfParentList: Number,
    formData: Object,
  },
  computed: {},
  // watch: {
  //   children: {
  //     handler(n) {
  //       console.log("grid unit children", n);
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
  methods: {
    getUnitName(unit) {
      // console.log("getUnitName in grid", this.fieldLib[unit]);
      return this.fieldLib[unit].type + "_unit";
    },
    onGridDragUpdate() {
      this.designer.emitHistoryChange();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .designer.el-row {
    min-height: 72px;
  }
}
</style>
